<template>
  <div>
    <el-row>
      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
        <div class="all">
          <el-button icon="el-icon-refresh" @click="getAllSongList">{{allList.name}}</el-button>

          <!-- 歌单索引index -->
          <el-collapse v-model="activeNames" @change="showCategory" accordion>
            <el-collapse-item name="0">
              <template slot="title">
                <i class="header-icon el-icon-help"></i>{{categories[0]}}
              </template>
              <div v-for="(item,i) in category" :key="i" class="category">
                <span @click="selectTy(item.name)" :class="{active:selectName == item.name}">{{item.name}}</span>
                <el-divider direction="vertical"></el-divider>
              </div>
            </el-collapse-item>

            <el-collapse-item name="1">
              <template slot="title">
                <i class="header-icon el-icon-brush"></i>{{categories[1]}}
              </template>
              <div v-for="(item,i) in category" :key="i" class="category">
                <span @click="selectTy(item.name)" :class="{active:selectName == item.name}">{{item.name}}</span>
                <el-divider direction="vertical"></el-divider>
              </div>
            </el-collapse-item>

            <el-collapse-item name="2">
              <template slot="title">
                <i class="header-icon el-icon-coffee-cup"></i>{{categories[2]}}
              </template>
              <div v-for="(item,i) in category" :key="i" class="category">
                <span @click="selectTy(item.name)" :class="{active:selectName == item.name}">{{item.name}}</span>
                <el-divider direction="vertical"></el-divider>
              </div>
            </el-collapse-item>

            <el-collapse-item name="3">
              <template slot="title">
                <i class="header-icon el-icon-sunny"></i>{{categories[3]}}
              </template>
              <div v-for="(item,i) in category" :key="i" class="category">
                <span @click="selectTy(item.name)" :class="{active:selectName == item.name}">{{item.name}}</span>
                <el-divider direction="vertical"></el-divider>
              </div>
            </el-collapse-item>

            <el-collapse-item name="4">
              <template slot="title">
                <i class="header-icon el-icon-service"></i>{{categories[4]}}
              </template>
              <div v-for="(item,i) in category" :key="i" class="category">
                <span @click="selectTy(item.name)" :class="{active:selectName == item.name}">{{item.name}}</span>
                <el-divider direction="vertical"></el-divider>
              </div>
            </el-collapse-item>
          </el-collapse>
        </div>
      </el-col>

      <!-- 歌单列表 -->
      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
        <el-row :gutter="20" type="flex" style=" flex-wrap: wrap">
          <el-col :span="4" v-for="(item,i) in allSongList" :key="i">
            <div class="coverImg"><img :src="item.coverImgUrl" :alt="item.name" @click="toSongListDetails(item.id)"></div>
            <div class="songListName" @click="toSongListDetails(item.id)">{{item.name}}</div>
            <div class="creator">
              <span class="by">by </span>
              <span class="creatorName" @click="toUserDetails(item.creator.userId)">{{item.creator.nickname}}</span>
            </div>
          </el-col>
        </el-row>
        <el-pagination :page-size="42" :pager-count="7" layout="prev, pager, next" :total="1260" :current-page="currentPage" @current-change="handleCurrentChange">
        </el-pagination>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getSongListClassify, getSongList } from "../../../network/home"

export default {
  name: "SongSheet",
  data() {
    return {
      // 索引折叠菜单的编号 0-4对应五种大类
      activeNames: "0",
      // 全部歌单
      allList: [],
      // 所有的大类
      categories: [],
      // 所有类型，不分大类
      sub: [],
      // 分好大类的类型，存入其中
      category: [],
      // 选中的类型
      selectName: "",
      // 根据类型查询出的歌单
      allSongList: [],
      //默认显示在第几页
      currentPage: 1,
    }
  },
  created() {
    this.getSongListClassify();
    this.getSongList(42, 0, "全部");
  },
  methods: {
    // 获取索引index 发送请求
    getSongListClassify() {
      getSongListClassify().then(res => {
        //console.log(res.data);
        this.allList = res.data.all;
        this.categories = res.data.categories;
        this.sub = res.data.sub;
        //初始化时就将 语种 的分类标签放入category
        for (let i in this.sub) {
          if (this.sub[i].category == 0) {
            this.category.push(this.sub[i]);
          }
        }
      })
    },
    // 折叠标签中的内容 分好大类的类型
    showCategory(category) {
      this.category = [];
      for (let i in this.sub) {
        if (this.sub[i].category == parseInt(category)) {
          this.category.push(this.sub[i]);
        }
      }
    },
    // 根据类型查询歌单 发送请求
    getSongList(limit, offset, cat) {
      getSongList(limit, offset, cat).then(res => {
        //console.log(res.data.playlists);
        this.allSongList = res.data.playlists;
      })
    },
    // 查询所有歌曲
    getAllSongList() {
      this.getSongList(42, 0, "全部");
    },
    // 根据选中的类型查询歌单
    selectTy(name) {
      if (this.selectName != name) {
        this.selectName = name;
        this.getSongList(42, 0, this.selectName);
      }
    },
    //获取当前页数 val为当前在第几页
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getSongList(42, (val - 1) * 42, this.selectName);
    },
    toSongListDetails(id) {
      this.$router.push({ name: "SongListDetail", params: { id: id } });
    },
    toUserDetails(id) {
      this.$router.push({ name: "UserDetails", params: { id: id } });
    },
  }
}
</script>

<style scoped>
.el-collapse >>> .el-collapse-item {
  font-size: 1.5rem !important;
}
.el-collapse-item >>> .el-collapse-item__header {
  font-size: 1.5rem !important;
}
.el-collapse-item >>> .el-collapse-item__wrap {
  font-size: 1.5rem !important;
}

.el-button {
  color: RGB(255, 255, 255);
  background-color: RGB(100, 189, 255);
  font-size: 1.2rem;
  margin-bottom: 10px;
}
.el-button:hover {
  color: RGB(64, 158, 255);
}
.category {
  display: inline;
}
.category span {
  font-size: 1.2rem;
}
.category span:hover {
  color: RGB(64, 158, 255);
}
.active {
  color: RGB(255, 255, 255);
  background-color: RGB(100, 189, 255);
}
.coverImg img {
  width: 100%;
  height: 100%;
}
.songListName {
  font-size: 1rem;
  width: 100%;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  cursor: pointer;
}
.songListName:hover {
  color: RGB(64, 158, 255);
}
.by {
  color: RGB(153, 153, 153);
}
.creatorName {
  width: 100%;
  font-size: 1rem;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  cursor: pointer;
}
.creatorName:hover {
  color: RGB(64, 158, 255);
}
.el-pagination {
  margin: 0 0 2% 35%;
}
.el-row {
  margin-bottom: 20px;
}
.el-col {
  border-radius: 4px;
  padding-bottom: 20px;
}
.el-col div {
  margin-bottom: 3px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>